{include file="public/head"/}
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<link rel="stylesheet" href="/static/Admin/css/bootstrap-select.min.css">
<script src="/static/Admin/js/bootstrap-select.min.js"></script>
<style>
    i img {
        width: 15px;
    }
</style>
<div class="container-fluid" id="Vuebox">
    <div class="row clearfix" id="search-box" style="margin-top:0">
        <div class="col-md-12 column text-right">
            <div class="form-inline" style="text-align: right;">
                <div class="form-group">
                    <input type="text" class="form-control" @keyup.13="render" v-model="dname" 
                    placeholder="{:lang('please_enter_the_department_name')}">
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default" @click="render">{:lang('search')}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-success">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('company_department')}</div>
        <div class="row clearfix">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" class="zhlang" @click="countrychange('0')">{:lang('global')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="enlang" @click="countrychange('1')">{:lang('BRAZIL')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="ptlang" id="list-normal"
                           @click="countrychange('2')">{:lang('CHINA')}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" class="zhlang" @click="langchange('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="enlang" @click="langchange('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="ptlang" id="list-normal"
                           @click="langchange('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12" style="margin-top: 5px;">
                <div class="form-inline" style="text-align: right;">
                    <a href="{:url('organization/departmentadd')}" type="button"
                       class='btn btn-sm btn-primary option-recover' data-toggle="modal"
                       data-target="#myModal"><span class="glyphicon glyphicon-plus"></span>{:lang('add_department')}</a>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <colgroup>
                        <col width="100">
                        <col width="450">
                        <col width="260">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th style="text-align: center;">{:lang('serial_number')}</th>
                        <th>{:lang('department_name')}</th>
                        <th>{:lang('number_of_employees')}</th>
                        <th style="text-align: center">{:lang('operate')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,i) in list" :key="item.id" v-if="item.isshow">
                        <td v-cloak style="text-align: center;">{{i+1}}</td>
                        <td style="padding-left: 0">
                            <template v-for="(itemlevel,indexlevel) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                            <a v-cloak href="javascript:;" @click="menuchange(item.id,item.toggle,item.pid)">
                                <i v-if="item.isexist==1">
                                    <span href="javascropt:;" v-if="item.toggle"><span class="glyphicon glyphicon-minus"
                                                                                       style="margin-right:0"></span></span>
                                    <span href="javascropt:;" v-if="!item.toggle"><span class="glyphicon glyphicon-plus"
                                                                                        style="margin-right:0"></span></span>
                                </i>
                                {{item.content}}
                            </a>
                        </td>
                        <td v-cloak>{{item.num}}</td>
                        <td style="text-align: right" class="text-right">
                            <div>
                                <a v-cloak :href="'/admin/Organization/departmentadds?id='+item.id" type="button"
                                   class='btn btn-sm btn-primary option-recover' data-toggle="modal"
                                   data-target="#myModal"><span class="glyphicon glyphicon-plus"></span>{:lang('add_sub-sector')}</a>
                                <a v-cloak :href="'/admin/Organization/departmentedit?id='+item.id" type="button"
                                   class='btn btn-sm btn-primary option-recover' data-toggle="modal"
                                   data-target="#myModal"><span class="glyphicon glyphicon-pencil"></span>{:lang('edit')}</a>
                                <a href="javascript:;" @click.prevent="delframe(item.id)" v-if="item.isexist!=1"
                                   class='btn btn-sm btn-default option-clear'><span
                                        class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="list.length==0">
                        <td colspan="4">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" id="pagination">
                </ul>
            </div>
        </div>
    </div>
</div>

<!--弹窗部分 开始-->
<div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg .modal-dialog-centered" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
{include file="public/foot"/}
<script>
    Vue.directive('focus', {
        bind: function (el) {
            el.focus()
        },
        inserted: function (el) {
            el.focus();//自动获取焦点
        },
    })
    var table = new Vue({
        el: '#Vuebox',
        data: {
            list: [],
            dname: '',
            lang: 'zh',//语言
            country_id: '0',
            datalen: 0,
        },
        methods: {
            //数据所有获取
            getAllList(is){
                $.ajax({
                    url: "/admin/organization/department",
                    type: 'post',
                    data: {
                        dname: this.dname,//search
                        country_id: this.country_id,//国家
                        lang: this.lang//语言
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getdepartment;
                        this.list.map((item) => {
                            if(item.level==0 || item.level==1){
                                item.isshow = true
                            }else{
                                item.isshow = false
                            }
                            if(item.level==0){
                                item.toggle=true
                            }
                        })
                    }
                })
            },
            //search
            render(){
                this.getAllList(1)
            },
            //语言点击
            langchange(lang){
                this.lang = lang;
                this.getAllList(1)
            },
            countrychange(country_id){
                this.page='1';
                this.country_id = country_id;
                this.getAllList(1)
            },
            //删除部门
            delframe(id){
                this.$http.post('/admin/Organization/departmentdelete?id=' + id, {}, {emulateJSON: true}).then(result => {
                    var res = result.body;
                    change_mes_type('.alert',res.status)
                    if (res.status != 1) {
                        $('.alert').show()
                        $('.alert p').html('*' + res.msg + '<br>')
                    } else {
                        $('.alert').show()
                        $('.alert p').html('*' + res.msg + '<br>')
                        this.list.some((item, i) => {
                            if (item.id == id) {
                                this.list.splice(i, 1);//删除其中的索引的数据
                                return true;
                            }
                        })
                    }
                });
            },
            showparent(pid,toggle){
                this.list.map(Element=>{
                    if(Element.id==pid){
                        Element.toggle= true//修改父级标识
                        if(Element.level!=0){
                            this.showparent(Element.pid,toggle)
                        }else{
                            Element.isshow=true
                        }
                    }
                    if(Element.pid==pid){
                        Element.isshow= true//同级显示
                    }
                })
            },
            //折线的是否显示
            menuchange(id,toggle,pid){
                 this.list.map(Element=>{
                        Element.isshow = false
                        Element.toggle=false
                })
                this.list = this.list.map((item) => {
                    if (item.pid == id) { //一级一级展开
                        item.isshow = !toggle
                        if (this.list.some((child) => {
                                return child.id == item.id
                            }) && toggle) {
                            this.menuchange(item.id, toggle)//收起全部
                        }
                    }
                    if (item.id == id) {
                        item.toggle = !toggle
                    }
                    return item
                })
                this.showparent(pid,toggle)
            }
        },
        created(){
            this.getAllList(1)
            $('#myModal').on('hide.bs.modal', () => {
                this.getAllList()
            })
        }

    })
    $("#myModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
</script>
